<template>
  <el-form ref="formRef" :model="modelData" :rules="rules" label-width="120px" class="mt-20px">
    <el-form-item label="表单类型" prop="formType" class="mb-20px">
      <el-radio-group v-model="modelData.formType">
        <el-radio v-for="dict in bpm_model_form_type" :key="dict.value" :value="dict.value">
          {{ dict.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      v-if="modelData.formType === BpmModelFormTypeEnum.Normal"
      label="流程表单"
      prop="formId"
    >
      <el-select v-model="modelData.formId" clearable class="w-full">
        <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="modelData.formType === BpmModelFormTypeEnum.Custom"
      label="表单提交路由"
      prop="formCustomCreatePath"
    >
      <el-input
        v-model="modelData.formCustomCreatePath"
        placeholder="请输入表单提交路由"
        class="!w-330px"
      />
      <el-tooltip
        class="item"
        content="业务表单的提交路径，使用 Vue 的路由地址，例如说：/bpm/oa/leave/create"
        effect="light"
        placement="top"
      >
        <Icon icon="ep:question-filled" class="ml-5px" />
      </el-tooltip>
    </el-form-item>
    <el-form-item
      v-if="modelData.formType === BpmModelFormTypeEnum.Custom"
      label="表单查看地址"
      prop="formCustomViewPath"
    >
      <el-input
        v-model="modelData.formCustomViewPath"
        placeholder="请输入表单查看的组件地址"
        class="!w-330px"
      />
      <el-tooltip
        class="item"
        content="业务表单的查看组件地址，使用 Vue 的组件地址，例如说：/bpm/oa/leave/detail.vue"
        effect="light"
        placement="top"
      >
        <Icon icon="ep:question-filled" class="ml-5px" />
      </el-tooltip>
    </el-form-item>
  </el-form>
  <!-- 表单预览 -->
  <div
    v-if="
      modelData.formType === BpmModelFormTypeEnum.Normal &&
      modelData.formId &&
      formPreview.rule.length > 0
    "
    class="mt-20px"
  >
    <div class="flex items-center mb-15px">
      <div class="h-15px w-4px bg-[#1890ff] mr-10px"></div>
      <span class="text-15px font-bold">表单预览</span>
    </div>
    <form-create
      v-model="formPreview.formData"
      v-model:api="fApi"
      :rule="formPreview.rule"
      :option="formPreview.option"
    />
  </div>
</template>

<script setup lang="ts">
import { FormApi, FormVO } from '@/api/bpm/form'
import { setFormConfAndFields } from '@/utils/formCreate'
import { BpmModelFormTypeEnum } from '@/utils/constants'
import type { Api } from '@form-create/element-ui'

defineOptions({ name: 'BpmModelFormDesign' })

const { bpm_model_form_type } = useIntDict(DICT_TYPE.bpm_model_form_type)

const _props = defineProps({
  formList: {
    type: Array as PropType<FormVO[]>,
    required: true
  }
})

const formRef = ref()

const modelData = defineModel<any>()

// 表单预览数据
const fApi = ref<Api>()
const formPreview = ref({
  formData: {},
  rule: [],
  option: {
    submitBtn: false,
    resetBtn: false
  }
})

watch(
  () => modelData.value.formId,
  async (formId) => {
    if (formId && modelData.value.formType === BpmModelFormTypeEnum.Normal) {
      const data: FormVO = await FormApi.getForm(formId)
      setFormConfAndFields(formPreview, data.conf, data.fields, true, true)
      await nextTick()
      // setFormConfAndFields中传noBtn=true，已通过调整data.conf进行按钮隐藏
      // fApi.value?.btn.show(false) // 隐藏提交按钮
      // fApi.value?.resetBtn.show(false) // 隐藏充值按钮
      fApi.value?.disabled(true) // 禁用所有表单组件
    } else {
      formPreview.value.rule = []
    }
  },
  { immediate: true }
)

const rules = {
  formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
  formId: [{ required: true, message: '流程表单不能为空', trigger: 'change' }],
  formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
  formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }]
}

/** 表单校验 */
const validate = async () => {
  await formRef.value?.validate()
}

defineExpose({
  validate
})
</script>

<style scoped lang="scss"></style>
